<template>
  <div class="header">
    <div class="head_top">
      <div class="head_top_1">
        <div class="left">
          <ul>
            <li>中国大陆</li>
            <li @click="login">欢迎登陆</li>
            <li style="color: red" @click="login">注册请点击</li>
            <li>无障碍浏览</li>
          </ul>
        </div>
        <div class="right">
          <ul>
            <li>我的订单</li>
            <li>我的收藏</li>
            <li @click="mycart" class="cart">
              <i
                class="iconfont icon-gouwuchekong"
                style="font-size: 13px; color: #ff6700; margin-right: 5px"
              ></i
              >我的购物车
            </li>
            <li>我的消息</li>
            <li>商品分类</li>
            <li>联系客服</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="head_center">
      <div class="head_center_1">
        <div class="text">Titk购物</div>
        <div class="search">
          <div class="search_input">
            <el-autocomplete
              v-model="state"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入内容"
              style="
                width: 600px;
                border: 2px solid #ff6700;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;

              "
              @select="handleSelect"
              @focus="handleFocus"
            ></el-autocomplete>
            <el-button
              type="primary"
              icon="el-icon-search"
              style="
                height: 51px;
                background-color: #ff6700;
                border-radius: 0%;
                border: 2px solid #ff6700;
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
              "
              @click="searchSelect"
              >搜索</el-button
            >
          </div>
          <div class="search_text"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted } from "vue";
export default {
  name: "header",
  components: {},
  data() {
    return {
      autoValue: [],
      restaurants: [],
      state: "",
      timeout: null,
    };
  },
  methods: {
    querySearchAsync(queryString, cb) {
      this.$http
        .get(`/api/es/suggestion?key=${queryString}`)
        .then((res) => {
          const data = res.data.data;
          // 将每个值前面添加'value'
          const suggestionsWithValue = data.map((item) => ({ value: item }));
          // 保存处理后的数据到组件的数据属性中
          this.autoValue = suggestionsWithValue;
          // 调用回调函数并传递处理后的数据
          cb(this.autoValue);

          // 在获取数据后执行的代码放在这里
          clearTimeout(this.timeout);
          this.timeout = setTimeout(() => {
            cb(this.autoValue);
          }, 1000 * Math.random());
        })
        .catch((error) => {
          // 在这里您可以根据需要处理请求失败的情况
        });
    },

    createStateFilter(queryString) {
      return (state) => {
        return state.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
      };
    },
    handleSelect(item) {
      console.log(item);
    },

    // 根据输入内容进行搜索
    searchSelect() {
      this.$http
        .post(`api/es/search?key=${this.state}&page=2&size=10`).then((res) => {
          console.log(res.data.data);
        })
      console.log(this.state);
    },
    // 获取焦点时改变边框颜色
    handleFocus() {
      document.querySelector('.el-autocomplete input').style.borderColor = '#ff6700';
    },

    login() {
      this.$router.push("/login");
    },
    // 跳转到购物车
    mycart() {
      this.$router.push("/mycart");
    },
  },
  mounted() {},
};
</script>





<style lang="less" scoped>
.header {
  height: 160px;
  background: rgb(237, 239, 241);

  .head_top {
    height: 40px;
    background: rgb(245, 245, 245);

    .head_top_1 {
      width: 1400px;
      margin: 0 auto;
      height: 40px;
      cursor: default;
    }

    .left {
      float: left;
      ul {
        li {
          color: #6c6c6c;
          font-size: 13px;
          float: left;
          margin-right: 30px;
        }
      }
    }

    .right {
      float: right;
      ul {
        li {
          color: #6c6c6c;
          font-size: 13px;
          float: left;
          margin-right: 30px;
        }
      }
    }
    .right ul li:hover {
      color: #ff6700;
    }
    .left ul li:hover {
      color: #ff6700;
    }
  }

  .head_center {
    height: 120px;
    width: 1400px;
    margin: 0 auto;

    .head_center_1 {
      height: 120px;
      padding-left: 180px;
      padding-right: 80px;
      .text {
        float: left;
        font-family: Helvetica;
        font-weight: bold;
        line-height: 120px;
        font-size: 40px;
        color: #ff6700;
      }
    }
    .search_input {
      float: left;
      margin-top: 40px;
      margin-left: 80px;
    }
  }
  /deep/ .el-input__inner {
    height: 47px;
    line-height: 60px;
  }
}
</style>